<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="main"></div>
  <script>
    window.onload = function() {
      const main = document.getElementById('main')

      // 1. 创建元素
      // nodeTypoe 为 1，nodeName 为 P
      const p = document.createElement('p')

      // 2. 创建文本节点
      const text = document.createTextNode('hello world')

      // 3. 先将文本节点放到元素节点中
      p.appendChild(text)

      // 4. 将元素节点添加到文档树中
      main.appendChild(p)
    }
  </script>

  <script>
    window.onload = function() {
      const p = document.createElement('p')
      const text01 = document.createTextNode('this is ')
      const em = document.createElement('em')
      const text02 = document.createTextNode('my')
      const text03 = document.createTextNode(' content.')

      em.appendChild(text02)
      p.appendChild(text01)
      p.appendChild(em)
      p.appendChild(text03)

      const main = document.getElementById('main')
      main.appendChild(p)
      main.parentNode.insertBefore(document.createElement('p'), main)
    }
  </script>
</body>
</html>